<template>

  <div id="formDesion">
    <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned"
                     :designer-config="designerConfig">
      <!-- 自定义按钮插槽演示 -->
      <template #customToolButtons>
        <el-button type="text" @click="saveFormJson">保存</el-button>
      </template>
    </v-form-designer>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import { ElMessage } from 'element-plus'
const vfDesigner = ref(null)
const id =window.localStorage.getItem('formId')


const fieldListApi = reactive({
  URL:import.meta.env.VITE_HTTP+`/manage/form/get?formId=${id}`,
  labelKey: 'fieldLabel',
  nameKey: 'fieldName',
})

const testBanned = ref([
  //'sub-form',
  //'alert',
])



const designerConfig = reactive({
  languageMenu: false,
  externalLink: false,
  formTemplates: false,
  eventCollapse: false,
  clearDesignerButton: true,
  previewFormButton: true,
  generateSFCButton:false

})
const saveFormJson = () => {
  let formJson = vfDesigner.value.getFormJson()
  //TODO: 将formJson提交给后端保存接口，需自行实现！！
  ElMessage.success('表单已保存！')
}



</script>

<style>
#app {
  height: 100%;
}
#formDesion .main-header {
  //visibility: hidden;
}
</style>
